/*
 * @Author: yixin 
 * @Date: 2019-11-22 16:56:00 
 * @Last Modified by: yixin
 * @Last Modified time: 2019-12-18 16:43:33
 * 泵送总量分析
 */
import React, { Component } from "react"
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import { withRouter } from 'react-router'
import styles from './totalQuantity.less'
import Header from '@/components/header';
import { pumpStatistics } from '@/services'
import Bar from '@/components/bar'
import Time from '@/components/time'
import md5 from 'js-md5';
class TotalQuantity extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.init()
  }

  init = async () => {
    try {
      const { worktime } = this.props.location.state
      const { data } = await pumpStatistics({ beginDate: worktime.beginDate, endDate: worktime.endDate });
      let categories = [];
      let values = []
      categories.push(data.profess.name);
      values.push({value: data.profess.pumpNum, itemStyle: { color: '#FB4033' }});
      data.list.map((item)=>{
        categories.push(item.name);
        values.push(item.pumpNum);
      })
      this.bar && this.bar.init(categories, values)
    } catch (error) {
      console.log(error)
    }
  }

  toPage = ({equipCode}) => {
    this.props.history.push(`carDetail?equipCode=${equipCode}&source=selfpage&token=${md5(equipCode+'selfpage'+'s$31d0dl1!~93-kHj^S')}`, { worktime: this.props.location.state.worktime })
  }
  
  render(){
    const { worktime } = this.props.location.state
    return (
      <div>
        <Header>泵送总量分析</Header>
        <Time time={worktime.beginDate===worktime.endDate ? worktime.beginDate : `${worktime.beginDate}-${worktime.endDate}`} />
        <Bar toPage={this.toPage} unit="方" ref={el=> { this.bar = el }} />
      </div>
    )
  }
}

export default withRouter(TotalQuantity)